<script lang="ts" setup>
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import BaseCard from '@/layouts/BaseCard.vue'

const projectItems = ref([
  { name: 'Fa4j-Server', desc: 'fa4j 是一款基于 Spring Boot、MyBatis-Plus、Vue 等主流技术栈构建的项目模板，旨在帮助开发者快速搭建应用系统。该项目采用模块化业务设计，支持通过灵活组装预置模块迅速构建完整应用，同时各模块具备良好的可扩展性，便于根据实际需求进行定制化二次开发。', gitee: 'https://gitee.com/jinlyone/fa4j-server', github: '', doc: '' },
  { name: 'Fa4j-Manage-Vue', desc: 'fuall-server 的管理端 web 应用，基于vue+element-plus技术栈实现', gitee: 'https://gitee.com/jinlyone/fa4j-manage-web', github: '', doc: '' },
])
const guideItems = ref([
  { name: '账户', icon: 'tdesign:user-1', path: '/system/account' },
  { name: '文件', icon: 'tdesign:file-attachment', path: '/system/file' },
  { name: '日志', icon: 'tdesign:list', path: '/system/account/log' },
  { name: '角色', icon: 'tdesign:user-safety', path: '/system/app/role' },
])
</script>

<template>
  <BaseCard class="p-3">
    欢迎进入Fa4j后台管理系统
  </BaseCard>

  <div class="mt-2 w-full flex flex-row gap-2">
    <div class="flex flex-1 flex-col gap-2">
      <BaseCard title="项目" body-class="p-0">
        <div class="grid grid-cols-3">
          <div
            v-for="(item, i) in projectItems" :key="i"
            :class="`project-item   ${(i + 1) % 3 === 0 ? '' : 'border-r border-r-solid'} ${Math.floor(guideItems.length / 3) * 3 > i ? 'border-b border-b-solid' : ''}` "
          >
            <div class="text-xl text-active font-semibold">
              {{ item.name }}
            </div>
            <div class="line-clamp-3 mt-4 flex-1 text-sm">
              {{ item.desc }}
            </div>
            <div class="mt-4 flex flex-row items-center justify-end gap-2">
              <a v-if="item.doc" :href="item.doc" target="__blank" class="flex-1 text-sm text-active">
                👉文档
              </a>
              <a v-if="item.gitee" :href="item.gitee" target="__blank">
                <img src="https://gitee.com/favicon.ico" style="height: 25px;width: 25px;">
              </a>
              <a v-if="item.github" :href="item.github" target="__blank">
                <Icon icon="octicon:mark-github-16" height="25px" />
              </a>
            </div>
          </div>
        </div>
      </BaseCard>
      <BaseCard title="模块" />
    </div>
    <div class="flex flex-1 flex-col gap-2">
      <BaseCard title="快捷导航" body-class="p-0">
        <div class="grid grid-cols-3">
          <div
            v-for="(item, i) in guideItems" :key="i"
            :class="`guide-item   ${(i + 1) % 3 === 0 ? '' : 'border-r border-r-solid'} ${Math.floor(guideItems.length / 3) * 3 > i ? 'border-b border-b-solid' : ''}` "
            @click="item.path && $router.push(item.path)"
          >
            <Icon v-if="item.icon" :icon="item.icon" height="25" color="006be6" />
            <div class="mt-2 text-sm font-bold">
              {{ item.name }}
            </div>
          </div>
        </div>
      </BaseCard>
      <BaseCard title="待办事项" />
    </div>
  </div>
</template>

<style lang="css" scoped>
.project-item {
  --at-apply: h-38 flex flex-col p-4 border-primary cursor-pointer;
}
.guide-item {
  --at-apply: h-30 flex flex-col justify-center items-center border-primary cursor-pointer;
}
</style>
